<template>
  <div class="x-unit" @click.self="closeMask" :style="{height:`${deviceH}px`}">
    <div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}">
      <div v-show="!isShowDetail">
        <div style="display:flex;margin-top:20px;">
          <div class="ctx-title" :class="{ isActive: unitType === 1 }" @click="changeTab(1)">物联报警</div>
          <div class="ctx-title" :class="{ isActive: unitType === 2 }" @click="changeTab(2)">视频Ai报警</div>
          <div class="ctx-title" :class="{ isActive: unitType === 3 }" @click="changeTab(3)">人工报警</div>
        </div>
          <!-- <div class="ctx-title">设备报警</div> -->
          <div class="ctx-info">

            <div class="info-table">
              <div class="table-rs">
                <div class="table-header">
                  <div class="header-select">
                      <x-select
                      @selectItem="selectItem3"
                      :name="unitTypeName1 || '处理状态'"
                      :listItem="unitTypeList1"
                    />
                    <!-- <x-select
                      @selectItem="selectItem"
                      :name="unitTypeName || '设备类型'"
                      :listItem="unitTypeList"
                    /> -->
                  </div>
                  <div class="header-item">
                    <!-- <input v-model="unitName" class="input" placeholder="单位名称" /> -->
                  </div>

                  <div class="header-item" style="background:rgba(0.8,0.8,0.8)"></div>
                  <div @click="searchEvent" class="header-btn">搜索</div>
                </div>
                <ul class="table-list">
                  <li class="list-item">
                    <div class="item-no">序号</div>
                    <!-- <div class="item-pic">单位类型</div> -->
                    <div class="item-name">设备名称</div>
                    <!-- <div class="item-type">设备编号</div> -->
                    <div class="item-phone">设备位置</div>
                    <div class="item-phone">报警时间</div>
                    <!-- <div class="item-people">报警类型</div> -->
                    <div class="item-people">处理状态</div>
                    <div class="item-people">操作</div>
                  </li>
                  <li v-for="item,i in AlarmList" :key="item.id" class="list-item" @click="handleDetail(i,item.handleEvent!='处理中')" :style="{cursor: item.handleEvent!='处理中'?'pointer':''}">
                    <!-- <div class="item-pic"></div> -->
                    <div class="item-no">{{i+1+pageSize*(pageNum-1)}}</div>
                    <div class="item-name">{{item.deviceName}}</div>
                    <!-- <div class="item-type">{{item.deviceModel}}</div> -->
                    <div class="item-phone">{{item.address}}</div>
                    <div class="item-phone">{{new Date().dateFtt(item.alarmTime,'MM-dd hh:mm:ss')}}</div>
                    <!-- <div class="item-people">{{item.alarmType}}</div> -->
                    <div class="item-people">{{item.handleEvent}}</div>
                    <div class="item-people">{{item.handleEvent!='处理中'?"操作":''}}</div>
                  </li>
                </ul>
              </div>
              <div v-if="allpage>0" class="table-footer">
                <x-page
                  :currentPage="pageNum"
                  @currentChange="currentChange"
                  :page-size="5"
                  :allpage="allpage"
                  :total-num="false"
                />
              </div>
            </div>
          </div>
      </div>
      <div v-if="isShowDetail ">
        <div class="ctx-title1">事件详情</div>
              <span @click="isShowDetail= false" style="float:right" class="back">
                <img src="../../assets/images/icon/return.png" alt />
              </span>
        </div>
        <div style="border:1px solid #246970;width:800px;margin: 0  auto;margin-top:40px" v-if="isShowDetail ">
          <div style="display:flex">
              <div class="span_left">事件ID</div>
              <div class="span_right" style="line-height:18px;word-wrap: break-word;">{{ details.eventId }}</div>
              <div class="span_left">事件类型</div>
              <div class="span_right">{{ details.alarmType==1?"物联报警":"监控报警" }}</div>
          </div>
          <div style="display:flex">
              <div class="span_left">处理结果</div>
              <div class="span_right" >{{ details.handleResult }}</div>
              <div class="span_left">处理时间</div>
              <div class="span_right">{{ new Date().dateFtt(details.createDate,'MM-dd hh:mm:ss')}}</div>
          </div>
            <div style="display:flex">
              <div class="span_left1">描述详情</div>
              <div class="span_right1"  style="flex:1;display:flex;align-items:center;">{{ details.describe }}</div>
          </div>
          <div style="display:flex" v-if="details.handleEvent!='未处理'">
              <div class="span_left1" style="height:154px">现场照片</div>
              <div class="span_right1"  style="flex:1;display:flex;height:152px;align-items:center;justify-content: space-around;">
                <div v-if="details.picList.length>0" v-for="item in details.picList" style="width:187px;height:121px;">
                  <img :src="item |filterimgsrc" alt="">
                </div>
              </div>
          </div>
          <div v-if="details.handleEvent=='未处理'">
            <div style="display:flex">
              <div class="span_left1">是否处理</div>
              <div class="span_right1"  style="flex:1;display:flex;">
                 <div class="header-select" style="height: 40px;width: 200px;">
                  <x-select @selectItem="selectItem2" :name="typeName2 " :listItem="typeList2" />
                </div>
              </div>
          </div>
           <div style="display:flex" v-if="typeId==2">
              <div class="span_left1">人员选择</div>
              <div class="span_right1"  style="flex:1;display:flex;">
                 <div class="header-select" style="height: 40px;width: 200px;">
                  <x-select @selectItem="selectItem1" :name="typeName " :listItem="typeList" />
                </div>
                <div class="header-select" style="height: 40px;width: 200px;margin-left:50px;">
                  <x-select @selectItem="selectItem" :name="peopleName " :listItem="peopleList" />
                </div>
              </div>
          </div>

          <div style="height:60px; display: flex;align-items: center;justify-content: center" >
            <div style=" width: 200px;background: rgb(36, 105, 112);color: rgb(255, 255, 255); height: 40px;line-height: 40px;border-radius: 4px;cursor: pointer;" @click="submit">提交</div>
          </div>
          </div>


        </div>

    </div>
  </div>
</template>
<script>
import {
  GetUnitTotleAndType,
  GetUnitInfoForPage,
  GetDictDataEnum,
  GetSecurityInfoForPage
} from "@/api/peopleApi";
import {
   getDevByPlaceId,
   getAlarmListForPage,
   updateAlarmCallBackInfo
} from '@/api/device'
import XPie from "@/components/xunitpie";
import XPage from "@/components/xpage";
import XSelect from "@/components/xselect";

export default {
  name: "xunitmodel",
  props: {
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    }
  },
  computed: {},
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      deviceH: 0,
      isShowDetail:false,
      unitType: 1, //设备类型
      unitTypeName: "", //
      unitType1: "", //处理状态
      unitTypeName1: "", //
      pageSize: 12,
      pageNum: 1,
      AlarmList: [],
      total: 0,
      allpage: 0,
      unitTypeList: [],
      unitTypeList1:[
        {enumName:'全部',id:''},
        {enumName:'未处理',id:'1'},
        {enumName:'处理中',id:'2'},
        {enumName:'已处理',id:'3'},
        {enumName:'误报警',id:'4'},
      ],
      camerquery: {},
      datails:{
        eventId:'',
        alarmType:'',
      },
      typeName2:'处理',
      typeId:2,
      typeList2:[
        {enumName:'处理',id:2},
        {enumName:'误报警',id:4}
      ],
      peopleList:[],
      peopleName:'',
      peoplePhone:'',
      typeName:'',
      typeList:[],
      allpeople:[],
    };
  },
  components: {
    XPie,
    XPage,
    XSelect
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
  mounted() {
    //this.getList()
    this.GetAlarmData()
    this.getPeople()
    // getDevByPlaceId(){

    // }
    //placeId:this.code
    // Promise([this.GetUnitData(), this.GetDictDataEnumList()]);
  },
  methods: {
    async submit(){
      let params={
        handleEvent:this.typeId,
        createPhone:this.peoplePhone,
        createName:this.peopleName,
        eventId:this.details.eventId,
        address:this.details.address,
        deviceName:this.details.deviceName,
        alarmId:this.details.alarmId
      }
      if(params.handleEvent==4){
          delete params.createPhone
          delete params.createName
        }
      let res=await updateAlarmCallBackInfo(params)
       if(res.code=="200"){
          this.closeMask()
          this.$message.success('提交成功！');
       }else{
         this.$message.error(res.msg);
       }

    },
        async getPeople(){
      let pagequery = {
            code: this.code,
            pageNum: 1,
            pageSize: 100
          }

     const res = await GetSecurityInfoForPage(pagequery)
     this.allpeople=res.data.list.map(item=>{
       return {
            enumName: item.name,
            id: item.phone,
            peopleType:item.peopleType
          }
     })
    var typeList=res.data.list.map(item=>{
      return  item.peopleType
    })
    this.typeList=Array.from(new Set(typeList)).map((item,index)=>{
      return {
        enumName:item,
        id:index
      }
    })
    this.typeName=this.typeList[0].enumName
     this.peopleList=this.allpeople.filter(item=>{
      return item.peopleType==this.typeName
     })


     this.peopleName=this.peopleList[0].enumName
     this.peoplePhone=this.peopleList[0].id
    },
    selectItem2(name,id){
      this.typeName2=name
      this.typeId=id
    },
    selectItem(name,id){
      this.peopleName=name
     this.peoplePhone=id
    },
     selectItem1(name,id){
      this.typeName=name

    this.peopleList=this.allpeople.filter(item=>{
      return item.peopleType==name
     })
     console.log(this.peopleList)
      this.peopleName=this.peopleList[0].enumName
     this.peoplePhone=this.peopleList[0].id

    },
    changeTab(index){
      this.unitType=index
      this.pageNum=1
      if(index==3){
        this.allpage=0
        this.AlarmList=[]
      }else{
        this.GetAlarmData()
      }


    },
    handleDetail(i,boolen){
      this.details=this.AlarmList[i];
      // this.isShowDetail=true
      if(boolen){
         this.isShowDetail=true
      }
    },
    async getList(){
      let param={
        code:this.code
      }
      getDevByPlaceId(param).then(res=>{
        console.log(res)
        var list=res.map(item=>{
          return {
            enumName: item.deviceName,
            id: item.deviceType
          }
        })
        list.unshift({
          enumName: "全部",
          id: ""
        });
        this.unitTypeList = list;

      })
    },
    async GetAlarmData() {
      try {
        let pagequery = {
          deviceType: this.unitType,
          placeId:this.code,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status:this.unitType1
        };

         let res= await getAlarmListForPage(pagequery);
         console.log(res);
         this.AlarmList=res.list

         this.total = res.total;
         this.allpage = Math.ceil(this.total / this.pageSize);
        // console.log(this.allpage);
        // this.UnitPageEchartsData = res.data.list;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    //获取类型
    async GetDictDataEnumList() {
      try {
        const res = await GetDictDataEnum("company_type");
        res.unshift({
          enumName: "全部",
          id: ""
        });
        this.unitTypeList = res;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    closeMask() {
      this.$emit("closeMask");
    },
    //分页
    currentChange(n) {
      console.log("分页");
      this.pageNum = n;
      this.GetAlarmData();
    },
    //搜索
    searchEvent() {
      this.pageNum = 1;
      this.GetAlarmData();
    },
    //选择下拉框
    // selectItem(name, id) {
    //   this.unitTypeName = name;
    //   this.unitType = id;
    // },
     selectItem3(name, id) {
      this.unitTypeName1 = name;
      this.unitType1 = id;
    }
  }
};
</script>
<style lang="less" scoped>
 .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;
      cursor: pointer;

      img {
        width: 30px;
        height: 30px;
      }
    }
.x-unit {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
    .span_left {
    background: rgba(27, 58, 61, 0.75);
    border: 1px solid #246970;
    padding-right: 15px;
    text-align: right;
    color: #ffffff;
    width: 150px;
    height: 50px;
    line-height: 50px;
        box-sizing: border-box;
  }
   .span_left1 {
    background: rgba(27, 58, 61, 0.75);
    border: 1px solid #246970;
    padding-right: 15px;
    text-align: right;
    color: #ffffff;
    width: 152px;
    height: 52px;
    line-height: 50px;
    box-sizing: border-box;
  }
  .span_right {
    padding-left: 20px;
    text-align: left;
    color: #ffffff;
    border: 1px solid #246970;
    width: 250px;
    height: 50px;
    line-height: 50px;
        box-sizing: border-box;
  }
   .span_right1 {
    padding-left: 20px;
    text-align: left;
    color: #ffffff;
    border: 1px solid #246970;
    // width: 250px;
    height: 50px;
    div{
      img{
        height: 100%;
        width:100%;
      }
    }
  }
    .item-no {
                width: 50px;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: center;
              }
  .item-pie {
    width: 100%;
    height: 400px;
    margin-top: 10px;
    padding: 5px 0px;
    box-sizing: border-box;
    .pie-canvas {
      width: 100%;
      height: 100%;
    }
  }
  .unit-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;
    .ctx-title1{
       padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
      cursor: pointer;
    }
     .ctx-title {
      width: 200px;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
      cursor: pointer;
    }
    .isActive {
      background: rgba(114, 237, 245, 0.6);
    }
    .ctx-info {
      width: 100%;

      height: 748px;
      padding-top: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      .info-type {
        flex: 1;
        .type-title {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;
          line-height: 36px;
        }
        .type-list {
          width: 100%;
          padding: 0;
          margin-top: 26px;
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          box-sizing: border-box;
          .type-list-rs {
            width: 100%;
            list-style: none;
            margin-bottom: 20px;
            .rs-name {
              width: 100%;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #e5e5e5;
              margin-bottom: 5px;
              .name {
                flex: 1;
                text-align: left;
              }
              .number {
                flex: 1;
                text-align: right;
              }
            }
            .rs-process {
              width: 100%;
              height: 6px;
              border-radius: 4px;
              background: #333333;
              .process {
                transition: width 0.3s ease-in-out;
                height: 100%;
                border-radius: 4px;
                background-image: linear-gradient(
                  270deg,
                  #68e0cf 0%,
                  #209cff 100%
                );
              }
            }
          }
        }
      }
      .info-table {
        flex: 3;
        height: 659px;
        padding-left: 40px;
        box-sizing: border-box;
        .table-rs {
          width: 100%;
          height: 562px;
          overflow-y: auto;
          .table-header {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-item {
              width: 186px;
              height: 100%;
              border: none;
              outline: none;
             // background: #06121d;
              border: 1px solid rgba(62, 178, 215, 0);
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
              padding: 0 14px;
              box-sizing: border-box;
              .input {
                font-size: 14px;
                color: #fff;
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                background: transparent;
              }
            }
            .header-select {
              width: 186px;
              margin-left: 20px;
              height: 100%;
            }
            .header-more {
              width: 56px;
              margin-left: 20px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #72edf5;
              line-height: 28px;
              text-decoration: underline;
            }
            .header-btn {
              width: 66px;
              height: 100%;
              background: #72edf5;
              border-radius: 4px;
              text-align: center;
              line-height: 36px;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #000000;
              cursor: pointer;
            }
          }
          .table-list {
            width: 100%;
            list-style: none;
            padding: 0;
            margin-top: 15px;
            .list-item {
              padding: 0;
              margin: 0;
              list-style: none;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 36px;

              &:nth-of-type(2n + 1) {
                background: #06121d;
              }
              &:nth-of-type(2n) {
                background: transparent;
              }
              .item-pic {
                width: 120px;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                text-align: center;
              }
              .item-name {
                width: 158px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;

              }
              .item-type {
                width: 116px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
              }
              .item-phone {
                width: 125px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
              }
              .item-people {
                width: 116px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
              }
              .item-cardid {
                width: 194px;
                text-align: left;
                height: 100%;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #ffffff;
                line-height: 36px;
                 overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
              }
            }
          }
        }
        .table-footer {
          width: 100%;
          padding-top: 60px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
